<template>
  <div class="container">
      <div class="card">
          <el-breadcrumb separator="/" class="card-body">
              <el-breadcrumb-item :to="{ path: '/AdminHome' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="card">
          <div class="card-header">用户查询</div>
          <div class="card-body">
              <div class="query-criteria clearfix">
                  <el-form :inline="true" :model="assetsSort" class="demo-form-inline f-left">
                      <div class="el-form-item el-form-item--small"><label class="el-form-item__label">搜索:</label></div>
                      <el-form-item>
                          <el-input v-model.trim="assetsSort.otherInfo" placeholder="姓名/登录名/工号"></el-input>
                      </el-form-item>
                      <el-form-item>
                          <el-button type="primary" @click="queryData(assetsSort.otherInfo)">查询</el-button>
                      </el-form-item>
                  </el-form>
                  <div class="fn-btn f-right">
                      <el-button type="warning" icon="el-icon-plus" @click="toNewUser">新增用户</el-button>
                  </div>
              </div>
          </div>
      </div>
      <div class="card User-list clearfix">

          <div class="classfy-tree" :style="{ height: cardBodyHeight + 'px' }">
              <div class="card-header">
                  组织结构 :
              </div>
              <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
          </div>

          <div class="classfy-data" ref="tabBody">
              <div class="card-header" ref="tableHeader">
                  <h2 class="e_inner_text f-left">{{ departmentLabel }}</h2>
              </div>
              <div class="card-body">
                  <el-table stripe ref="multipleTable" v-loading="isLoading" :data="userData" :height="tableHeight">
                      <el-table-column prop="name" label="姓名" width="">
                      </el-table-column>
                      <el-table-column prop="account" label="帐户名" width="120">
                      </el-table-column>
                      <el-table-column label="加入时间">
                          <template slot-scope="scope">{{ scope.row.createTime }}</template>
                      </el-table-column>
                      <el-table-column prop="jobMobile" label="工位电话" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column prop="department.label" label="所属部门" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="账户状态" show-overflow-tooltip>
                        <template slot-scope="scope">
                          <span class="color-danger" v-if="scope.row.status == '-1'">已禁用</span>
                          <span class="color-success" v-if="scope.row.status == '1'">正常使用</span>
                          <span class="color-warning" v-if="scope.row.status == '0'">未激活</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" fixed="right" width="170">
                          <template slot-scope="scope">
                            <el-button size="mini" type="warning" @click="handleDisableUser('-1',scope.row.id)" v-if="scope.row.status == '1'" plain>禁用</el-button>
                            <el-button size="mini" type="primary" @click="handleDisableUser('0',scope.row.id)" v-if="scope.row.status == '-1'">启用</el-button>
                            <el-button size="mini" type="warning" @click="handleDisableUser('-1',scope.row.id)" v-if="scope.row.status == '0'" plain>禁用</el-button>
                            <el-button size="mini" @click="toUserDetail(scope.row.id)">编辑</el-button>
                          </template>
                      </el-table-column>
                  </el-table>
                  <div class="page-wrap" ref="tablePage">
                      <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagesTotal">
                      </el-pagination>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import request from "@/utils/request";
// import { SET_TIME_YYMMDDHHMM } from "@/utils/formatTime.js"
export default {
  name: "UserMain",
  data() {
    return {
      pageSize: 10,
      pagesTotal: 0,
      currentPage: 1,

      departmentLabel: "",
      departmentId:"",

      isLoading: false,
      assetsSort: {
        otherInfo: ""
      },
      userData: [],

      screenHeight: window.innerHeight,
      cardBodyHeight: window.innerHeight - 277,
      tableHeight: window.innerHeight - 277 - 139,

      treeData: []
    };
  },
  methods: {
    handleDisableUser(stc, id) {
      this.$confirm("确认禁用这个用户？")
        .then(_ => {
          console.log(_)
          request({
            url: this.$api.updateUserStatus,
            method: "post",
            data: {
                    "id":id, 
                    "status": stc
                  }
          }).then(res => {
            if (res.code === "000000") {
              this.$message.success("操作已成功!");
            }
          }).finally(()=>{
            this.getTree();
          });
        })
        .catch(_ => {
          console.log(_)
        });
    },
    handlView(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    toNewUser() {
      this.$router.push({ path: "/UserManagement/UserCreate" });
    },
    toUserDetail(id) {
      this.$router.push({
        path: "/UserManagement/UserDetail" + "?userid=" + id
      });
    },
    handleNodeClick(data) {
      //获取部门id,请求分页数据
      new Promise((resolve, reject) => {
        this.departmentLabel = data.label;
        resolve(data.id);
      }).then(id => {
        let limit = this.pageSize;
        this.departmentId = id;
        this.getUserList("", id, limit, 1);
      });
    },
    queryData(word) {
      //关键词查询
      let limit = this.pageSize;
      this.assetsSort.otherInfo = word;
      this.getUserList(word, "", limit, 1);
    },
    //获取组织树形数据
    getTree() {
      new Promise((resolve, reject) => {
        request({
          url: this.$api.getAllDepartment,
          method: "get"
        })
          .then(res => {
            this.treeData = res.data;
          })
          .finally(() => {
            this.departmentLabel = this.treeData[0].label;
            resolve(this.treeData[0].id);
          });
      }).then(res => {
        //初始化用户列表
        let word = this.assetsSort.otherInfo;
        this.departmentId = res;
        this.getUserList(word, res, 10, 1);
      });
    },
    getUserList(condition, departmentId, limit, offset) {
      condition = this.assetsSort.otherInfo;
      this.isLoading = true;
      request({
        url:
          this.$api.queryUserForPage + `?condition=${condition}&departmentId=${departmentId}&status=${''}&limit=${limit}&offset=${offset}`,
        method: "get"
      })
        .then(res => {
          this.userData = res.data.list;
          this.pagesTotal = res.data.total;
          this.pageSize = res.data.pageSize;
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    sizeChange(pageSize) {
      let currentPage = this.currentPage;
      this.pageSize = pageSize;
      let word = this.assetsSort.otherInfo;
      this.getUserList(word, this.departmentId, pageSize, currentPage);
    },
    currentChange(currentPage) {
      let pageSize = this.pageSize;
      this.currentPage = currentPage;
      let word = this.assetsSort.otherInfo;
      this.getUserList(word, this.departmentId, pageSize, currentPage);
    }
  },
  mounted() {
    //初始化数据
    this.getTree();
    //监听窗口高度变化
    window.onresize = () => {
      this.screenHeight = window.innerHeight;
    };
    //初始化列表
  },
  watch: {
    screenHeight: function(val) {
      if (!this.timer) {
        this.timer = true;
        setTimeout(() => {
          this.timer = false;
          this.cardBodyHeight = val - 277;
          this.tableHeight = val - 277 - 139;
        }, 500);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.fn-btn {
  float: right;
}
.classfy-tree {
  width: 220px;
  float: left;
  position: relative;
  z-index: 1;
  background: #f9fafc;
  border-right: 1px solid #ebeef5;
  .card-header {
    border-bottom: 1px solid #e4e6e9;
  }
  .el-tree {
    padding: 10px;
    background: transparent !important;
  }
}
.classfy-data {
  padding-left: 221px;
  position: relative;
  z-index: 0;
  .card-header {
    line-height: 51px;
    height: 54px;
  }
  .e_inner_text {
    color: #000;
    font-size: 18px;
    line-height: 54px;
  }
}
.classfy-data {
  padding-left: 221px;
  position: relative;
  z-index: 0;
  .card-header {
    line-height: 51px;
    height: 54px;
  }
  .e_inner_text {
    color: #000;
    font-size: 18px;
    line-height: 54px;
  }
}
</style>